<template>
    <div class="song-audio">
        <audio ref="player" 
        :src="url"
        controls = "controls"
        preload="true"
        @canplay="startPlay"
        @ended="ended"
        >
        </audio>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'song.audio',
    computed:{
        ...mapGetters([
            'id',
            'url',
            'isPlay'
        ])
    },
    watch:{
        isPlay: function(){
            this.togglePlay();
        }
    },
    methods:{
        // 获取链接准备播放
        startPlay(){
            let player =this.$refs.player;
            // 开始播放
            player.play();
        },
        // 播放完后触发
        ended(){
            this.isPlay = false
        },
        // 开始，暂停
        togglePlay(){
            let player = this.$refs.player;
            if(this.isPlay){
                player.play();
            }else{
                player.pause();
            }
        }
    }
}

</script>

<style>
    .song-audio{
        display: inline;
    }

</style>